<template>
  <div class="app-container">
    <div class="title" style="padding-bottom:0">
      <div class="left">
        <!-- <span class="circle"></span> -->
      </div>
      <div class="right" v-show='btnShow'>
        <div>

          <el-button size="small" @click="handelLog" :disabled="loading">反馈记录</el-button>
          <el-button size="small" type="primary" @click="handelFeed" :disabled="loading">进度反馈</el-button>

          <el-button size="small" @click="handelLog2" :disabled="loading">验收记录</el-button>
          <el-button size="small" type="primary" @click="handelFeed2" :disabled="loading">质量验收</el-button>

        </div>

        <!-- <div style="margin-top:15px">

        </div> -->
      </div>

    </div>
    <div class="context-warp" style=" overflow: hidden;">
      <div class="page-form-item page-form-item2">
        <label class="page-form-item-label">
          <span class="page-form-item-label__text">项目名称</span>
        </label>
        <div class="page-form-item-content">
          {{topData.pigfarmProject && topData.pigfarmProject.projectName}}
        </div>
      </div>

      <div class="page-form-item page-form-item2">
        <label class="page-form-item-label">
          <span class="page-form-item-label__text">合同名称</span>
        </label>
        <div class="page-form-item-content">
          {{topData.contractInfo && topData.contractInfo.contractTitle}}
        </div>
      </div>
    </div>
    <div style="text-align:right;padding-right:15px">
      <!-- <el-button type="primary" size="small" v-show="!isDisabled" @click="handelAdd">新增</el-button> -->
    </div>
    <div class="context-warp" style=" overflow: hidden;">
      <el-table
        :data="topData.contractProgressNodeList"
        border
        @selection-change="handleSelectionChange"
        style="width: 100%">
        <el-table-column label="场区" width="150">
          <template slot-scope="scope">
            {{scope.row.areaDictName}}
          </template>
        </el-table-column>
        <el-table-column label="单体编号/名称">
          <template slot-scope="scope">
            {{scope.row.nodeName}}
          </template>
        </el-table-column>
        <el-table-column label="改造事项">
          <template slot-scope="scope">
            {{scope.row.remark}}
          </template>
        </el-table-column>
        <el-table-column label="计划开始">
          <template slot-scope="scope">
            {{scope.row.planStartDate}}
          </template>
        </el-table-column>
        <el-table-column label="计划结束">
          <template slot-scope="scope">
            {{scope.row.planEndDate}}
          </template>
        </el-table-column>
        <el-table-column label="工作量">
          <template slot-scope="scope">
            {{scope.row.workLoad}}
          </template>
        </el-table-column>
        <el-table-column label="工期">
          <template slot-scope="scope">
            {{scope.row.planDates}}
          </template>
        </el-table-column>
        <el-table-column label="进度" width="90">
          <template slot-scope="scope">
            {{scope.row.progress}}%
          </template>
        </el-table-column>
        <el-table-column label="视频验收参与人员" min-width="120">
          <template slot-scope="scope">
            {{getPeople(scope.row)}}
          </template>
        </el-table-column>
        <el-table-column label="视频验收录像">
          <template slot-scope="scope">
            <a v-if="scope.row.contractProgressNodeVideo?scope.row.contractProgressNodeVideo.url:''" :href="scope.row.contractProgressNodeVideo?scope.row.contractProgressNodeVideo.url:''" target="_blank" style="color: #42b983">查看</a>
          </template>
        </el-table-column>
        <el-table-column label="视频验收状态">
          <template slot-scope="scope">
            <span v-if="scope.row.contractProgressNodeVideo">
              <span v-if="scope.row.contractProgressNodeVideo.checkResult==0">未验收</span>
              <span v-if="scope.row.contractProgressNodeVideo.checkResult==1">验收不通过</span>
              <span v-if="scope.row.contractProgressNodeVideo.checkResult==2">验收通过</span>
            </span>
            <span v-else>未验收</span>
          </template>
        </el-table-column>
        <el-table-column label="视频验收时间">
          <template slot-scope="scope">
            {{scope.row.contractProgressNodeVideo ? (scope.row.contractProgressNodeVideo.checkResult == 0 ? '' : scope.row.contractProgressNodeVideo.createTime) : ''}}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="small" type="primary" @click="videoCheck(scope.row)" :disabled="loading" v-if="!scope.row.contractProgressNodeVideo || (scope.row.contractProgressNodeVideo && scope.row.contractProgressNodeVideo.checkResult!=2)">视频验收</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>
  import moment from 'moment'
  import { addFarmInfo,updateFarmInfo,getFeedbackInfo,updateRetunFile,getProgressList,getDictList,startVideoChecked} from "@/api/progressManagement/feedback";
  import { roleOption } from "@/api/auth/role";
  import { getToken } from "@/utils/auth";
  import { treeselect } from "@/api/auth/dept";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import BaseIndex from '@/views/base/BaseIndex'
  import FileUpload from '@/views/components/fileUpload/index.vue'
  import { newWindowBpm } from "@/utils/openBpm";
  import loadingSearchFormCompany from '@/views/components/loadingSearchFormCompany/index.vue'
  import {getUser} from "@/api/auth/user";

  export default {
    name: "feedbackDetails",
    components: { Treeselect , FileUpload ,loadingSearchFormCompany },
    extends: BaseIndex,
    data() {
      return {
        newWindowBpm,
        pageType:'',

        isDisabled:false,
        contractId:'', // 合同Id
        tableData:[],
        topData:{
          contractProgressNodeList:[],
          pigfarmProject:{},
          contractInfo:{},
        },
        btnShow:false,
        // 选择的需要视频验收的id列表
        videoCheckIds:[],
        // 选择的需要视频验收的提示
        videoCheckUIShow:false,
        // 选中的哪一个视频验收的项
        videoCheckedItem:{},
      };
    },
    watch: {

    },
    created() {
      if (this.$route.query.status == 'completed') {
        this.btnShow = true
      }

      this.pageType = this.$route.query.type
      if(this.$route.query.type == 'add'){

      }

      getFeedbackInfo(this.$route.query.id).then(
        response => {
          if(response && response.code ===0){

            this.topData = {...response.data}
          }else{
            this.msgError(response.msg)
          }
          this.loading = false;
        }
      );
    },
    methods: {

      getOneField(arr,key){
        if (arr && arr.length){
          let res = []
          arr.map(item=>{
            res.push(item[key])
          })
          return res.toString()
        }
        return ''
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.videoCheckIds = selection.map(item => item.id)
        this.videoCheckedItem = selection.map(item => item)
      },

      // 视频验收
      videoCheck(row) {

        this.$confirm(`确定是否发起：“${row.areaDictName}场区-${row.nodeName}单体”的视频验收？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          startVideoChecked(row.id).then(res=>{
            this.loading = false
            this.$message.success('消息推送成功，请在企业微信进行视频验收')
          }).catch(err=>{
            this.loading = false
          })
        })

      },

      handelSaveFn(e){
        var para = {

        }

        if(this.$route.query.type == 'change'){
          updateFarmInfo(para).then(
            response => {
              if(response && response.code ===0){
                this.msgSuccess("成功");
                this.$router.go(-1)
              }else{
                this.msgError(response.msg)
              }
              this.loading = false;
            }
          );
        }else{
          addFarmInfo(para).then(
            response => {
              if(response && response.code ===0){
                this.msgSuccess("成功");
                this.$router.go(-1)
              }else{
                this.msgError(response.msg)
              }
              this.loading = false;
            }
          );
        }

      },

      getPeople(row){
        if (row.contractProgressNodeVideo?row.contractProgressNodeVideo.oaNames:''){
          return (row.contractProgressNodeVideo?row.contractProgressNodeVideo.createByName:'') + ',' +(row.contractProgressNodeVideo?row.contractProgressNodeVideo.oaNames:'')
        }
      },

      handelFeed(){
        this.$router.push({path: "proFeedback", query: {
            projectName:this.topData.pigfarmProject && this.topData.pigfarmProject.projectName,
            contractTitle:this.topData.contractInfo && this.topData.contractInfo.contractTitle,
            id:this.topData.id
          }});
      },
      handelLog(){
        this.$router.push({path: "feedbackLog", query: {
            projectName:this.topData.pigfarmProject && this.topData.pigfarmProject.projectName,
            contractTitle:this.topData.contractInfo && this.topData.contractInfo.contractTitle,
            id:this.topData.id
          }});
      },

      handelFeed2(){
        this.$router.push({path: "proQuality", query: {
            projectName:this.topData.pigfarmProject && this.topData.pigfarmProject.projectName,
            contractTitle:this.topData.contractInfo && this.topData.contractInfo.contractTitle,
            id:this.topData.id
          }});
      },
      handelLog2(){
        this.$router.push({path: "qualityLog", query: {
            projectName:this.topData.pigfarmProject && this.topData.pigfarmProject.projectName,
            contractTitle:this.topData.contractInfo && this.topData.contractInfo.contractTitle,
            id:this.topData.id
          }});
      }

    }
  };
</script>
<style scoped  lang="scss">
  .title {
    display: flex;
    justify-content: space-between;
    padding: 0 0.9375rem 0.9375rem 0.9375rem;
    // padding: 0 0.9375rem 0 0.9375rem;
    background-color: white;
    // border-bottom: 2px solid #ccc ;
    .circle {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      display: inline-block;
      background-color: #4A75D0;
      margin-right: 10px;
    }
  }

  .context-warp {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 15px;
    margin: 15px;
    border-bottom: 1px solid #ebeef3;
    border-right: 1px solid #ebeef3;
    background-color: white;

    .page-form-item {
      width: 33.3%;
      font-size: 14px;
      font-family: "PingFangSC";
      position: relative;
      border-top: 1px solid #ebeef3;
      vertical-align: top;
      height: 66px;
      color: #4d4d4d;
      display: flex;

      .page-form-item-label {
        width: 120px;
        height: 100%;

        .icon {
          color: red;
        }
      }

      .left-border {
        position: absolute;
        height: 100%;
        width: 1px;
        left: 0;
        top: 0;
        background-color: #ebeef3;
        z-index: 999;
      }

      &-label {
        display: inline-block;
        height: calc(100% - 16px);
        background-color: #f9fafd;
        border-right: 1px solid #ebeef3;
        border-left: 1px solid #ebeef3;
        text-align: center;

        .require {
          display: inline-block;
          width: 8px;
          color: #f56c6c;
          vertical-align: -3px;
        }

        &__text {
          display: inline-block;
          vertical-align: middle;
          line-height: 1.3em;
          width: 80%;
        }

        &::after {
          content: "";
          display: inline-block;
          vertical-align: middle;
          height: 100%;
        }
      }

      .border-right0 {
        border-right: 0;
      }

      &-content {
        display: inline-block;
        vertical-align: top;
        padding: 8px;
        height: calc(100% - 16px);

        &.noLabel {
          border-left: 1px solid #ebeef3;
        }

        &::after {
          content: "";
          display: inline-block;
          vertical-align: middle;
          height: 100%;
        }

        &.align-top {
          &::after {
            content: "";
            vertical-align: top;
          }
        }

        &.noPadding {
          padding: 0;
        }
      }

      .el-table th {
        background-color: #f9fafd;
      }

      .el-radio {
        margin-right: 15px;
      }

      .el-radio__label {
        font-size: 12px;
      }

      .el-input--small .el-input__inner {
        font-size: 12px;
      }

      .el-checkbox {
        font-size: 12px;
      }

      .el-checkbox__label {
        font-size: 12px;
        vertical-align: -2px;
      }

      .el-select {
        width: 100%;
      }

      .el-cascader {
        width: 100%;
      }

      .el-date-editor.el-input,
      .el-date-editor.el-input__inner {
        width: 100%;
      }

      .el-textarea__inner {
        height: 80px;
      }
      .page-form-item-content {
        height: 100%;
        flex: 1;
        display: flex;
        align-items: center;
        .text-box {
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          overflow: hidden;
          cursor: pointer;
        }

        .slider-box {
          display: flex;
          justify-content: space-between;

          &:first-child {
            flex: 1;
          }
        }
      }
    }

    .page-form-item2{
      width: 50%;
    }
    .page-form-item3{
      width: 100%;
    }
    .page-form-item4{
      width: 25%;
    }
  }
</style>
